Mistrovství v CSS animacích řízených posouváním: Hloubkový pohled na synchronizaci časových os

Po léta byla tvorba poutavých animací vázaných na posouvání na webu doménou JavaScriptu. Vývojáři se spoléhali na knihovny a složité smyčky `requestAnimationFrame`, neustále naslouchající událostem posouvání. Ačkoliv byl tento přístup efektivní, často s sebou nesl daň v podobě výkonu, což vedlo k trhání a méně plynulému zážitku, zejména na méně výkonných zařízeních. Dnes probíhá změna paradigmatu, která přesouvá celou tuto kategorii designu uživatelského rozhraní přímo do vysoce výkonného vykreslovacího enginu prohlížeče, a to díky CSS animacím řízeným posouváním (CSS Scroll-Driven Animations).

Tato mocná nová specifikace nám umožňuje propojit průběh animace přímo s pozicí posouvání kontejneru nebo viditelností prvku. Výsledkem jsou dokonale plynulé, GPU akcelerované animace, které jsou deklarativní, přístupné a pozoruhodně efektivní. Avšak skutečný tvůrčí potenciál se odemyká, když se posuneme za animování jednotlivých prvků a začneme v harmonii režírovat vícenásobné, složité interakce. To je umění synchronizace animací.

V tomto komplexním průvodci prozkoumáme klíčové koncepty časových os CSS animací řízených posouváním a ponoříme se hluboko do technik potřebných k jejich synchronizaci. Naučíte se, jak vytvářet vrstvené paralaxové efekty, sekvenční odhalování příběhu a složité interakce komponent – a to vše s čistým CSS. Budeme se zabývat:

• Zásadním rozdílem mezi časovými osami `scroll()` a `view()`.
• Revolučním konceptem pojmenovaných časových os pro synchronizaci více prvků.
• Jemným ovládáním přehrávání animace pomocí `animation-range`.
• Praktickými příklady z reálného světa s kódem, který můžete použít ještě dnes.
• Nejlepšími postupy pro výkon, přístupnost a kompatibilitu s prohlížeči.

Připravte se přehodnotit, co je s CSS možné, a pozvedněte své webové zážitky na novou úroveň interaktivity a dokonalosti.

Základy: Porozumění časovým osám animací

Než budeme moci synchronizovat animace, musíme nejprve pochopit mechanismus, který je pohání. Tradičně je časová osa CSS animace založena na plynutí času, jak je definováno její vlastností `animation-duration`. U animací řízených posouváním toto spojení s časem přerušujeme a místo toho propojujeme průběh animace s novým zdrojem: časovou osou průběhu (progress timeline).

Toho je dosaženo primárně pomocí vlastnosti `animation-timeline`. Místo toho, aby animace běžela sama po spuštění, tato vlastnost říká prohlížeči, aby procházel klíčovými snímky animace na základě průběhu specifikované časové osy. Když je časová osa na 0 %, animace je na svém 0% klíčovém snímku. Když je časová osa na 50 %, animace je na svém 50% klíčovém snímku a tak dále.

Specifikace CSS poskytuje dvě hlavní funkce pro vytváření těchto časových os průběhu:

1. `scroll()`: Vytváří anonymní časovou osu, která sleduje průběh posouvání kontejneru s posuvníkem (scroller).
2. `view()`: Vytváří anonymní časovou osu, která sleduje viditelnost konkrétního prvku, jak se pohybuje přes viewport (nebo jakýkoli scroller).

Pojďme se na každou z nich podrobně podívat, abychom si vybudovali pevné základy.

Hloubkový pohled: Časová osa průběhu `scroll()`

Co je `scroll()`?

Funkce `scroll()` je ideální pro animace, které by měly odpovídat celkovému průběhu posouvání stránky nebo konkrétního posouvatelného prvku. Klasickým příkladem je ukazatel průběhu čtení v horní části článku, který se vyplňuje, jak uživatel posouvá stránku dolů.

Měří, do jaké míry uživatel posunul obsah ve scrolleru. Ve výchozím nastavení sleduje pozici posouvání celého dokumentu, ale lze ji nakonfigurovat tak, aby sledovala jakýkoli posouvatelný kontejner na stránce.

Syntaxe a parametry

Základní syntaxe funkce `scroll()` je následující:

animation-timeline: scroll(<scroller> <axis>);

Pojďme si rozebrat její parametry:

• `<scroller>` (volitelný): Určuje, který posouvací kontejner má být sledován.
  • root: Výchozí hodnota. Představuje scroller viewportu dokumentu (hlavní posuvník stránky).
  • self: Sleduje pozici posouvání samotného prvku za předpokladu, že je posouvacím kontejnerem (např. má `overflow: scroll`).
  • nearest: Sleduje pozici posouvání nejbližšího nadřazeného posouvacího kontejneru.
• `<axis>` (volitelný): Definuje osu posouvání, která se má sledovat.
  • block: Výchozí hodnota. Sleduje průběh podél osy bloku (vertikální pro horizontální režimy psaní, jako je angličtina).
  • inline: Sleduje průběh podél osy inline (horizontální pro angličtinu).
  • y: Explicitní alias pro vertikální osu.
  • x: Explicitní alias pro horizontální osu.

Praktický příklad: Ukazatel průběhu posouvání stránky

Pojďme vytvořit ten klasický ukazatel průběhu čtení. Je to dokonalá ukázka `scroll()` v její nejjednodušší podobě.

Struktura HTML:

            <div class="progress-bar"></div>
<article>
  <h1>A Long Article Title</h1>
  <p>... a lot of content here ...</p>
  <p>... more content to make the page scrollable ...</p>
</article>
            

              
                Copy
              
            
          

Implementace v CSS:

            /* Define the keyframes for the progress bar */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Style the progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animate scale from the left side */

  /* Link the animation to the scroll timeline */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Basic body styling for demonstration */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Ensure there is plenty to scroll */
}
            

              
                Copy
              
            
          

Vysvětlení:

1. Definujeme jednoduchou animaci `grow-progress`, která mění měřítko prvku horizontálně od 0 do 1.
2. Prvek `.progress-bar` je připevněn k horní části viewportu.
3. Kouzlo se odehrává v posledních dvou vlastnostech. Aplikujeme animaci `grow-progress`. Klíčové je, že místo abychom jí dali trvání (jako `1s`), nastavíme její `animation-timeline` na `scroll(root block)`.
4. To říká prohlížeči: „Nepřehrávej tuto animaci v čase. Místo toho procházej jejími klíčovými snímky, jak uživatel posouvá kořenový dokument vertikálně (osa `block`).“

Když je uživatel úplně nahoře na stránce (0% průběh posouvání), `scaleX` pruhu bude 0. Když je úplně dole (100% průběh posouvání), jeho `scaleX` bude 1. Výsledkem je dokonale plynulý ukazatel průběhu bez nutnosti JavaScriptu.

Síla blízkosti: Časová osa průběhu `view()`

Co je `view()`?

Zatímco `scroll()` se týká celkového průběhu kontejneru, `view()` se zabývá cestou jediného prvku viditelnou oblastí scrolleru. Je to nativní CSS řešení pro neuvěřitelně běžný vzor „animovat při odhalení“, kdy se prvky objevují s prolínáním, vysouvají nahoru nebo jinak animují, jakmile vstoupí na obrazovku.

Časová osa `view()` začíná, když se prvek poprvé stane viditelným v scrollportu, a končí, když z něj úplně zmizí. To nám dává časovou osu od 0 % do 100 %, která je přímo svázána s viditelností prvku, což ji činí neuvěřitelně intuitivní pro efekty odhalení.

Syntaxe a parametry

Syntaxe pro `view()` je mírně odlišná:

animation-timeline: view(<axis> <view-timeline-inset>);

• `<axis>` (volitelný): Stejně jako u `scroll()` (`block`, `inline`, `y`, `x`). Určuje, vůči které ose scrollportu se sleduje viditelnost prvku.
• `<view-timeline-inset>` (volitelný): Toto je mocný parametr, který vám umožňuje upravit hranice „aktivního“ viewportu. Může přijímat jednu nebo dvě hodnoty (pro počáteční a koncové odsazení). Můžete použít procenta nebo pevné délky. Například `100px 20%` znamená, že časová osa považuje viewport za začínající 100px od horního okraje a končící 20 % od dolního okraje. To umožňuje jemné doladění, kdy animace začíná a končí vzhledem k pozici prvku na obrazovce.

Praktický příklad: Prolnutí při odhalení

Vytvořme klasický efekt, kde se karty s obsahem objevují prolnutím a posunem, jakmile se objeví na obrazovce při posouvání.

Struktura HTML:

            <section class="content-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</section>
            

              
                Copy
              
            
          

Implementace v CSS:

            /* Define keyframes for the reveal animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Apply the animation to each card */
  animation: fade-in-up linear;
  animation-timeline: view(); /* This is it! */

  /* Other styling */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Layout styling */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

Vysvětlení:

1. Klíčové snímky `fade-in-up` definují animaci, kterou chceme: začít průhledně a mírně níže, skončit neprůhledně a na konečné pozici.
2. Každý prvek `.card` má tuto animaci aplikovanou.
3. Klíčový řádek je `animation-timeline: view();`. Tím se vytvoří jedinečná, anonymní časová osa pro každou kartu.
4. Pro každou jednotlivou kartu bude její animace na 0 %, když právě začíná vstupovat do viewportu, a dosáhne 100 %, když z něj právě dokončila odchod.

Jak posouváte stránku dolů, každá karta se plynule animuje na své místo přesně v okamžiku, kdy se objeví v zorném poli. Toho je dosaženo pouhými dvěma řádky CSS, což je výkon, který dříve vyžadoval JavaScript Intersection Observer a pečlivou správu stavu.

Hlavní téma: Synchronizace animací

Použití anonymních časových os `scroll()` a `view()` je mocné pro izolované efekty. Ale co když chceme, aby více prvků reagovalo na stejnou časovou osu? Představte si paralaxový efekt, kde se obrázek na pozadí, nadpis a prvek v popředí pohybují různými rychlostmi, ale všechny jsou řízeny stejnou akcí posouvání. Nebo obrázek produktu, který se transformuje, jak posouváte kolem seznamu jeho vlastností.

Zde přichází na řadu synchronizace a klíčem je přechod od anonymních časových os k pojmenovaným časovým osám.

Proč synchronizovat?

Synchronizace umožňuje vytváření bohatých, příběhově orientovaných zážitků. Místo sbírky nezávislých animací můžete vytvořit soudržnou scénu, která se vyvíjí, jak uživatel posouvá. To je nezbytné pro:

• Složité paralaxové efekty: Vytváření pocitu hloubky pohybem různých vrstev různými rychlostmi vzhledem k jednomu spouštěči posouvání.
• Koordinované stavy komponent: Animování různých částí složité UI komponenty v souladu, jak se posouvá do zorného pole.
• Vizuální vyprávění: Odhalování a transformování prvků v pečlivě choreografované sekvenci, která provede uživatele příběhem.

Technika: Sdílené pojmenované časové osy

Mechanismus synchronizace zahrnuje tři nové CSS vlastnosti:

1. `timeline-scope`: Aplikuje se na kontejnerový prvek. Vytváří rozsah, ve kterém mohou být pojmenované časové osy definované uvnitř něj nalezeny jinými prvky.
2. `scroll-timeline-name` / `view-timeline-name`: Aplikuje se na prvek k vytvoření a pojmenování časové osy. Název musí být dashed-ident (např. `--my-timeline`). Průběh posouvání (`scroll-timeline-name`) nebo viditelnost (`view-timeline-name`) tohoto prvku se stává zdrojem pro pojmenovanou časovou osu.
3. `animation-timeline`: Tuto vlastnost jsme již viděli, ale nyní místo použití `scroll()` nebo `view()` jí předáme dashed-ident název naší sdílené časové osy (např. `animation-timeline: --my-timeline;`).

Proces je následující: 1. Nadřazený prvek definuje `timeline-scope`. 2. Potomek definuje a pojmenuje časovou osu pomocí `view-timeline-name` nebo `scroll-timeline-name`. 3. Jakýkoli jiný potomek pak může použít tento název ve své vlastnosti `animation-timeline`, aby se napojil na stejnou časovou osu.

Praktický příklad: Vícevrstvá paralaxová scéna

Pojďme vytvořit klasickou paralaxovou hlavičku, kde se obrázek na pozadí posouvá pomaleji než stránka a nadpis mizí rychleji.

Struktura HTML:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synchronized Motion</h1>
</div>
<div class="content">
  <p>... main page content ...</p>
</div>
            

              
                Copy
              
            
          

Implementace v CSS:

            /* 1. Define a scope for our named timeline */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Define the timeline itself using the container's visibility */
/* The container's journey through the viewport will drive the animations */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Define the keyframes for each layer */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Moves slower */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Style the layers and hook them to the named timeline */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Extra height to allow for movement */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Attach to the shared timeline */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Attach to the same shared timeline */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

Vysvětlení:

1. Prvek `.parallax-container` vytváří `timeline-scope` s názvem `--parallax-scene`. Tím se název zpřístupní jeho potomkům.
2. Poté přidáme `view-timeline-name: --parallax-scene;` na stejný prvek. To znamená, že časová osa s názvem `--parallax-scene` bude `view()` časová osa založená na viditelnosti samotného `.parallax-container`.
3. Vytvoříme dvě různé animace: `move-background` pro jemný vertikální posun a `fade-title` pro efekt prolnutí a zmenšení.
4. Klíčové je, že jak `.parallax-background`, tak `.parallax-title` mají svou vlastnost `animation-timeline` nastavenou na `--parallax-scene`.

Nyní, jak se `.parallax-container` posouvá přes viewport, generuje jednu hodnotu průběhu. Jak pozadí, tak nadpis používají tuto stejnou hodnotu k řízení svých příslušných animací. I když jsou jejich klíčové snímky zcela odlišné, jejich přehrávání je dokonale synchronizováno, což vytváří soudržný a působivý vizuální efekt.

Pokročilá synchronizace s `animation-range`

Pojmenované časové osy jsou skvělé pro přehrávání animací v souladu. Ale co když chcete, aby se přehrávaly v sekvenci nebo aby se jedna animace spustila pouze během určité části viditelnosti jiného prvku? Zde přichází na řadu rodina vlastností `animation-range`, která poskytuje další vrstvu mocného ovládání.

Více než jen 0 % až 100 %

Ve výchozím nastavení je animace mapována na celou dobu trvání její časové osy. `animation-range` vám umožňuje definovat konkrétní počáteční a koncové body časové osy, které by měly odpovídat 0% a 100% bodům klíčových snímků vaší animace.

To vám umožňuje říci něco jako: „Spusť tuto animaci, když prvek vstoupí do 20 % obrazovky, a dokonči ji, než dosáhne 50% značky.“

Porozumění hodnotám `animation-range`

Syntaxe je `animation-range-start` a `animation-range-end`, nebo zkráceně `animation-range`.

animation-range: <start-range> <end-range>;

Hodnoty mohou být kombinací speciálních klíčových slov a procent. Pro `view()` časovou osu jsou nejběžnější klíčová slova:

• entry: Okamžik, kdy ohraničující rámeček prvku překročí koncový okraj scrollportu.
• exit: Okamžik, kdy ohraničující rámeček prvku překročí počáteční okraj scrollportu.
• cover: Pokrývá celé období, kdy prvek překrývá scrollport, od okamžiku, kdy ho plně překryje, do okamžiku, kdy přestane.
• contain: Pokrývá období, kdy je prvek plně obsažen v scrollportu.

Můžete k nim také přidat procentuální posuny, jako `entry 0%` (výchozí začátek), `entry 100%` (když se dolní okraj prvku setká s dolním okrajem viewportu), `exit 0%` a `exit 100%`.

Praktický příklad: Sekvenční příběhová scéna

Vytvořme seznam funkcí, kde se každá položka zvýrazní, jak kolem ní posouváte, s použitím jedné sdílené časové osy pro dokonalou koordinaci.

Struktura HTML:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Feature One: Global Reach</h3>
    <p>Our services are available worldwide.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Two: Unbeatable Speed</h3>
    <p>Experience next-generation performance.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Three: Ironclad Security</h3>
    <p>Your data is always protected.</p>
  </div>
</div>
            

              
                Copy
              
            
          

Implementace v CSS:

            /* Define the scope on the main container */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Give space for scrolling */
}

/* Use a dedicated empty div to define the timeline's source */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Keyframes for highlighting an item */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Attach animation and the shared timeline */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* The magic of animation-range for sequencing */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

Vysvětlení:

1. Vytvoříme rozsah `--feature-list` a pojmenovanou `view()` časovou osu vázanou na prázdný značkovací div, který pokrývá celý kontejner. Tato jediná časová osa sleduje viditelnost celé sekce s funkcemi.
2. Každý `.feature-item` je napojen na stejnou časovou osu `--feature-list` a má stejnou animaci `highlight-feature`.
3. Klíčovou částí je `animation-range`. Bez ní by se všechny tři položky zvýraznily současně, jakmile by se kontejner objevil při posouvání.
4. Místo toho přiřazujeme různé rozsahy:
   • První položka se animuje mezi 5 % a 40 % průběhu časové osy.
   • Druhá položka se animuje v okně od 35 % do 70 %.
   • Třetí se animuje od 65 % do 100 %.

Tím vzniká nádherný sekvenční efekt. Jak posouváte, první funkce se zvýrazní. Jak pokračujete v posouvání, ta se ztlumí, zatímco se zvýrazní druhá, a tak dále. Překrývající se rozsahy (`entry 40%` a `entry 35%`) vytvářejí plynulé předání. Tato pokročilá sekvence a synchronizace je dosažena jen několika řádky deklarativního CSS.

Výkon a osvědčené postupy

Ačkoliv jsou CSS animace řízené posouváním neuvěřitelně mocné, je důležité je používat zodpovědně. Zde jsou některé klíčové osvědčené postupy pro globální publikum.

Výhoda ve výkonu

Hlavní výhodou této technologie je výkon. Na rozdíl od posluchačů posouvání založených na JavaScriptu, které běží na hlavním vlákně a mohou být blokovány jinými úkoly, CSS animace řízené posouváním běží na kompozitorovém vlákně. To znamená, že zůstávají hedvábně plynulé, i když je hlavní vlákno zaneprázdněno. Pro maximalizaci této výhody se držte animování vlastností, které jsou levné na kompozici, především `transform` a `opacity`.

Aspekty přístupnosti

Ne každý chce nebo může tolerovat pohyb na webových stránkách. Je klíčové respektovat preference uživatelů. Použijte media query `prefers-reduced-motion` k deaktivaci nebo omezení vašich animací pro uživatele, kteří mají toto nastavení povoleno ve svém operačním systému.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Disable the animations */
    animation: none;
    /* Ensure elements are in their final, visible state */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

Podpora prohlížečů a záložní řešení

Ke konci roku 2023 jsou CSS animace řízené posouváním podporovány v prohlížečích založených na Chromiu (Chrome, Edge) a jsou v aktivním vývoji ve Firefoxu a Safari. Pro globální publikum musíte zvážit prohlížeče, které tuto funkci ještě nepodporují. Použijte pravidlo `@supports` k aplikaci animací pouze tam, kde jsou podporovány.

            /* Default state for non-supporting browsers */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Apply animations only in supporting browsers */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Initial state for animation */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

Tento přístup postupného vylepšování zajišťuje funkční zážitek pro všechny uživatele, s vylepšeným, animovaným zážitkem pro ty, kteří používají moderní prohlížeče.

Tipy pro ladění

Moderní vývojářské nástroje v prohlížečích přidávají podporu pro ladění animací řízených posouváním. Například v Chrome DevTools můžete prozkoumat prvek a najít novou sekci v panelu „Animations“, která vám umožní vidět průběh časové osy a ručně jím procházet, což značně usnadňuje jemné doladění vašich hodnot `animation-range`.

Závěr: Budoucnost je řízena posouváním

CSS animace řízené posouváním, a zejména schopnost je synchronizovat pomocí pojmenovaných časových os, představují monumentální skok vpřed pro webový design a vývoj. Posunuli jsme se od imperativních, často křehkých JavaScriptových řešení k deklarativnímu, výkonnému a přístupnému přístupu nativnímu pro CSS.

Prozkoumali jsme základní koncepty časových os `scroll()` a `view()`, které se starají o průběh na úrovni stránky a na úrovni prvku. Ještě důležitější je, že jsme odemkli sílu synchronizace vytvořením sdílených, pojmenovaných časových os pomocí `timeline-scope` a `view-timeline-name`. To nám umožňuje vytvářet složité, koordinované vizuální příběhy, jako jsou paralaxové scény. Nakonec jsme s `animation-range` získali granulární kontrolu pro sekvencování animací a vytváření složitých, překrývajících se interakcí.

Osvojením těchto technik už jen nestavíte webové stránky; tvoříte dynamické, poutavé a výkonné digitální příběhy. Jak se podpora prohlížečů bude nadále rozšiřovat, tyto nástroje se stanou nezbytnou součástí arzenálu každého front-end vývojáře. Budoucnost webové interakce je zde a je poháněna posuvníkem.